:host {
  display: block;
  height: 100%;
}

header {
  align-items: center;
  box-shadow: var(--lumo-box-shadow-s);
  display: flex;
  height: var(--lumo-size-xl);
  width: 100%;
}

header h1 {
  font-size: var(--lumo-font-size-l);
  margin: 0;
}

header vaadin-avatar,
header a {
  margin-left: auto;
  margin-right: var(--lumo-space-m);
}

vaadin-app-layout[dir="rtl"] header vaadin-avatar,
vaadin-app-layout[dir="rtl"] header a {
  margin-left: var(--lumo-space-m);
  margin-right: auto;
}

#logo {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: var(--lumo-space-s) var(--lumo-space-m);
}

#logo img {
  height: calc(var(--lumo-size-l) * 1.5);
}

#logo span {
  font-size: var(--lumo-font-size-xl);
  font-weight: 600;
  margin: 0 var(--lumo-space-s);
}

vaadin-tab {
  font-size: var(--lumo-font-size-s);
  height: var(--lumo-size-l);
  font-weight: 600;
  color: var(--lumo-body-text-color);
}

vaadin-tab:hover {
  background-color: var(--lumo-contrast-5pct);
  text-decoration: none;
}

vaadin-tab[selected] {
  background-color: var(--lumo-primary-color-10pct);
  color: var(--lumo-primary-text-color);
}

hr {
  margin: 0;
}
